<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:volt="http://primefaces.org/volt">
    <h:form id="menuform">
        <volt:menu>
            <p:submenu id="rm_dashboards" label="Dashboards" icon="icon-leaf">
                <p:menuitem id="rm_db_landing" value="Your Promotion Page" icon="icon-leaf" outcome="/promotion-page.xhtml"/>
                <p:menuitem id="rm_db_v1" value="Dashboard V1" icon="icon-leaf" outcome="/dashboard.xhtml"/>
                <p:menuitem id="rm_db_v2" value="Dashboard V2" icon="icon-leaf" outcome="/dashboard2.xhtml"/>
            </p:submenu>

            <p:submenu id="rm_menupos" label="Menu Position" icon="icon-select">
                <p:menuitem id="rm_left" value="Inline Menu" icon="icon-uniE675" onclick="$('body').removeClass('PopupMenu');return false;"/>
                <p:menuitem id="rm_popup" value="Popup Menu" icon="icon-windows" onclick="$('body').addClass('PopupMenu');return false;"/>
            </p:submenu>

            <p:submenu id="rm_colors" label="Body Colors" icon="icon-lab">
                <p:menuitem id="rm_bg_blue" value="Blue" icon="icon-syringe" onclick="$('body').removeClass().addClass('BlueBody');return false;"/>
                <p:menuitem id="rm_bg_leaden" value="Leaden" icon="icon-syringe" onclick="$('body').removeClass().addClass('LeadenBody');return false;"/>
                <p:menuitem id="rm_bg_red" value="Red" icon="icon-syringe" onclick="$('body').removeClass().addClass('RedBody');return false;"/>
                <p:menuitem id="rm_bg_green" value="Green" icon="icon-syringe" onclick="$('body').removeClass().addClass('GreenBody');return false;"/>
                <p:menuitem id="rm_bg_cf" value="CornFlower" icon="icon-syringe" onclick="$('body').removeClass().addClass('CornFlowerBody');return false;"/>
                <p:menuitem id="rm_bg_gray" value="Gray" icon="icon-syringe" onclick="$('body').removeClass().addClass('DarkGrayBody');return false;"/>
            </p:submenu>

            <p:submenu id="rm_theme" label="Volt Theme" icon="icon-meter">
                <p:menuitem id="rm_sample" value="Sample Page" outcome="/sample.xhtml" icon="fa fa-columns" />
                <p:menuitem id="rm_forms" value="Form Elements" outcome="/forms.xhtml" icon="icon-document-text" />
                <p:menuitem id="rm_data" value="Data Components" outcome="/data.xhtml" icon="icon-cube" />
                <p:menuitem id="rm_datatable" value="DataTable" outcome="/datatable.xhtml" icon="icon-news" />
                <p:menuitem id="rm_panels" value="Panels" outcome="/panel.xhtml" icon="icon-window" />
                <p:menuitem id="rm_overlays" value="Overlays" outcome="/overlay.xhtml" icon="icon-windows" />
                <p:menuitem id="rm_menus" value="Menus" outcome="/menu.xhtml" icon="icon-uniE675" />
                <p:menuitem id="rm_messages" value="Messages" outcome="/messages.xhtml" icon="icon-messages" />
                <p:menuitem id="rm_charts" value="Charts" outcome="/charts.xhtml" icon="icon-connection-50" />
                <p:menuitem id="rm_fileupload" value="FileUpload" outcome="/file.xhtml" icon="icon-upload" />
                <p:menuitem id="rm_misc" value="Misc" outcome="/misc.xhtml" icon="icon-pill" />
            </p:submenu>

            <p:submenu id="rm_default" label="Default Pages" icon="icon-list">
                <p:menuitem id="rm_empty" value="Empty Page" outcome="/empty-page.xhtml" icon="icon-code-outline" />
                <p:menuitem id="rm_login" value="Login Page" outcome="/login.xhtml" icon="icon-key-outline" />
                <p:menuitem id="rm_error" value="Error Page" outcome="/error.xhtml" icon="icon-radar-outline" />
                <p:menuitem id="rm_404" value="404 Page" outcome="/404.xhtml" icon="icon-search" />
                <p:menuitem id="rm_access" value="Access Denied Page" outcome="/access-denied.xhtml" icon="icon-eye-outline" />
            </p:submenu>

            <p:submenu id="rm_hierarchy" label="Menu Hierarchy" icon="icon-flow-switch">
                <p:submenu id="rm_sm1" label="Submenu 1" icon="icon-folder2">
                    <p:submenu id="rm_sm11" label="Submenu 1.1" icon="icon-folder2">
                        <p:submenu id="rm_sm111" label="Submenu 1.1.1" icon="icon-folder2">
                            <p:menuitem id="rm_lnk1111" value="Link 1" url="#" icon="icon-link-outline" />
                            <p:menuitem id="rm_lnk1112" value="Link 2" url="#" icon="icon-link-outline" />
                            <p:menuitem id="rm_lnk1113" value="Link 3" url="#" icon="icon-link-outline" />
                        </p:submenu>
                    </p:submenu>
                </p:submenu>
                <p:submenu id="rm_sm2" label="Submenu 2" icon="icon-folder2">
                    <p:submenu id="rm_sm22" label="Submenu 2.2" icon="icon-folder2">
                        <p:submenu id="rm_sm221" label="Submenu 2.2.1" icon="icon-folder2">
                            <p:menuitem id="rm_lnk2211" value="Link 1" url="#" icon="icon-link-outline" />
                            <p:menuitem id="rm_lnk2212" value="Link 2" url="#" icon="icon-link-outline" />
                            <p:menuitem id="rm_lnk2213" value="Link 3" url="#" icon="icon-link-outline" />
                        </p:submenu>
                    </p:submenu>
                </p:submenu>
            </p:submenu>

            <p:submenu id="rm_links" label="Links" icon="icon-atom">
                <p:menuitem id="rm_icons" value="Font Icons" outcome="/font-icons.xhtml" icon="icon-lightbulb" />
                <p:submenu id="rm_docs" label="Documentation" icon="icon-clipboard2">
                    <p:submenu id="rm_docs_core" label="Core CSS Docs" icon="fa fa-code">
                        <p:menuitem id="rm_docs_1" value="Installation" outcome="/docs/core/installation.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_2" value="Menus" outcome="/docs/core/menus.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_3" value="Responsive Mode" outcome="/docs/core/responsive-mode.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_4" value="ContainerX" outcome="/docs/core/containerx.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_5" value="WidX" outcome="/docs/core/widx.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_6" value="Selection" outcome="/docs/core/selection.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_7" value="Visibility" outcome="/docs/core/visibilities.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_8" value="Displaying" outcome="/docs/core/displaying.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_9" value="Positioning" outcome="/docs/core/positioning.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_10" value="Underline" outcome="/docs/core/underline.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_11" value="Floating" outcome="/docs/core/floating.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_12" value="Overflows" outcome="/docs/core/overflows.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_13" value="Empty Boxes" outcome="/docs/core/empty-boxes.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_14" value="Opacity" outcome="/docs/core/opacity.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_15" value="Text Aligning" outcome="/docs/core/text-aligning.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_16" value="Box Sizing" outcome="/docs/core/box-sizing.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_17" value="Font Size" outcome="/docs/core/font-size.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_18" value="Font Weights" outcome="/docs/core/font-weights.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_19" value="Transitions" outcome="/docs/core/transitions.xhtml" icon="icon-menu" />
                    </p:submenu>
                    <p:submenu id="rm_docs_layout" label="Layout CSS Docs" icon="fa fa-code">
                        <p:menuitem id="rm_docs_20" value="LESS" outcome="/docs/layout/less.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_21" value="Cards" outcome="/docs/layout/cards.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_22" value="Text Colors" outcome="/docs/layout/text-colors.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_23" value="Background Colors" outcome="/docs/layout/background-colors.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_24" value="Borders" outcome="/docs/layout/borders.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_25" value="Separators" outcome="/docs/layout/separators.xhtml" icon="icon-menu" />
                        <p:menuitem id="rm_docs_26" value="Effects" outcome="/docs/layout/effects.xhtml" icon="icon-menu" />
                    </p:submenu>
                </p:submenu>
            </p:submenu>
        </volt:menu>
    </h:form>
</ui:composition>